<template>
  <div class="user">
    <a-menu mode="horizontal">
      <a-sub-menu>
        <template #title>
          {{ userinformation.username }}
          <a-avatar size="small">
            <template #icon><UserOutlined /></template>
          </a-avatar>
        </template>
        <a-menu-item v-if="options.manage" @click="manngerUsers">
          管理用户
        </a-menu-item>
        <a-menu-item v-if="!options.manage" @click="changePassword"
          >修改密码</a-menu-item
        >
        <a-menu-item @click="handleExit">退出登录</a-menu-item>
      </a-sub-menu>
    </a-menu>
    <a-modal v-model:visible="visible" title="修改密码" @ok="handleOk">
      <a-form
        :model="formState"
        name="normal_login"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
      >
        <a-form-item label="用户名" name="username">
          <a-input
            v-model:value="formState.username"
            :disabled="isdisabled"
            :placeholder="username"
          >
          </a-input>
        </a-form-item>

        <a-form-item
          label="原密码"
          name="password"
          :rules="[{ required: true, message: '请输入原密码' }]"
        >
          <a-input-password v-model:value="formState.password">
          </a-input-password>
        </a-form-item>

        <a-form-item
          label="新密码"
          name="newpassword"
          :rules="[{ required: true, message: '请输入新密码' }]"
          ><a-input-password v-model:value="formState.newpassword">
          </a-input-password>
        </a-form-item>

        <a-form-item
          label="确认"
          name="confirm"
          :rules="[{ required: true, message: '请确认' }]"
          ><a-input-password v-model:value="formState.confirm">
          </a-input-password>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { UserOutlined } from '@ant-design/icons-vue'
import { useStore } from 'vuex'
import { ref, reactive, toRefs } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import $api from '@/request/api'
import { message } from 'ant-design-vue'
const $store = useStore()
const router = useRouter()
const options = JSON.parse(JSON.stringify($store.state.options))
const userinformation = JSON.parse(JSON.stringify($store.state.userinformation))
const id = userinformation.user_id
const visible = ref(false)
const isdisabled = ref(true)

const formState = reactive({
  username: '',
  password: '',
  newpassword: '',
  confirm: '',
})
const { username, password, newpassword, confirm } = toRefs(formState)
username.value = userinformation.username

// 点击确认
const handleOk = () => {
  if (newpassword.value != confirm.value) {
    message.error('新密码输入不一致')
  } else {
    $api.changePassword(formState).then((res) => {
      const { code, messages } = res
      if (code == 204) {
        message.success(messages)
        password.value = ''
        newpassword.value = ''
        confirm.value = ''
        visible.value = false
      } else {
        message.error(messages)
      }
    })
  }
}

// 管理用户
const manngerUsers = () => {
  location.href = 'http://127.0.0.1:5174/commonuser'
}
// 退出登录
const handleExit = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('options')
  localStorage.removeItem('userinformation')
  router.push({
    path: '/login',
  })
  $api.exitStatus(id).then((res) => {
    message.success(res.messages)
  })
}
// 修改密码
const changePassword = () => {
  visible.value = true
}
</script>

<style></style>
